<template>
  <div class="chart-container">
    <div class="chart-item">
      <div id="provinceChart" ref="provinceChartDom" class="chart" />
    </div>
    <div class="chart-item">
      <div id="cityChart" ref="cityChartDom" class="chart" />
    </div>
  </div>
</template>

<script setup lang="ts" name="GaugeChart">
import { listOtherData } from "@/api/aqiMeasuredResult";
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";

defineOptions({
  name: "GaugeChart"
});

const provinceChartDom = ref(null);
const provinceOption = {
  title: {
    text: "全国省会城市网格覆盖率(%)",
    left: "center",
    textStyle: {
      color: "white",
      fontSize: 13 // 设置字体大小为 13px
    }
  },
  tooltip: {
    formatter: "{a} <br/>{b} : {c}%"
  },
  color: ["#88DA98"],
  aria: {
    textStyle: {
      color: "white"
    }
  },
  series: [
    {
      name: "Province",
      type: "gauge",
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: "{value}",
        textStyle: {
          color: "white"
        }
      },
      axisLabel: {
        //刻度标签
        color: "white",
        distance: 10, //标签与刻度线的距离
        fontSize: 8
      },
      data: [
        {
          value: 0,
          name: ""
        }
      ]
    }
  ]
};

const cityChartDom = ref(null);
const cityOption = {
  title: {
    text: "全国大城市网格覆盖率(%)",
    left: "center",
    textStyle: {
      color: "white",
      fontSize: 13 // 设置字体大小为 12px
    }
  },
  tooltip: {
    formatter: "{a} <br/>{b} : {c}%"
  },
  color: ["#D96BBF"],
  series: [
    {
      name: "City",
      type: "gauge",
      progress: {
        show: true
      },
      axisLabel: {
        //刻度标签
        color: "white",
        distance: 10, //标签与刻度线的距离
        fontSize: 8
      },
      detail: {
        valueAnimation: true,
        formatter: "{value}",
        textStyle: {
          color: "white"
        }
      },
      data: [
        {
          value: 50,
          name: ""
        }
      ]
    }
  ]
};

const cityCoverage = ref(0);

const provinceCoverage = ref(0);

const listOtherDataList = async () => {
  try {
    const { data } = await listOtherData();
    provinceCoverage.value = parseFloat(data.provinceCoverage.replace("%", ""));
    cityCoverage.value = parseFloat(data.cityCoverage.replace("%", ""));
    console.log(provinceCoverage.value);
  } catch (error) {
    console.error("获取其他数据时出错:", error);
  }
};

onMounted(() => {
  const provinceChart = echarts.init(provinceChartDom.value);
  provinceOption && provinceChart.setOption(provinceOption);
  const cityChart = echarts.init(cityChartDom.value);
  cityOption && cityChart.setOption(cityOption);
  listOtherDataList();
  watch(provinceCoverage, newVal => {
    provinceOption.series[0].data[0].value = newVal;
    provinceChart.setOption(provinceOption);
  });
  watch(cityCoverage, newVal => {
    cityOption.series[0].data[0].value = newVal;
    cityChart.setOption(cityOption);
  });
});
</script>

<style scoped>
.chart-container {
  display: flex;
}

.chart-item {
  flex: 1;
  margin: 0 10px; /* 调整间距 */
}

.chart {
  width: 100%;
  height: 200px;
}
</style>
